import { ReactNode } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';

interface ProtectedRouteProps {
  children: ReactNode;
  requireAuth?: boolean;
  redirectTo?: string;
}

export const ProtectedRoute = ({ 
  children, 
  requireAuth = true, 
  redirectTo = '/login' 
}: ProtectedRouteProps) => {
  // const { isAuthenticated, isChecking } = useAuth();
  // const location = useLocation();

  // // 如果正在检查认证状态，显示加载中
  // if (isChecking) {
  //   return (
  //     <div className="min-h-screen flex items-center justify-center">
  //       <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-500"></div>
  //     </div>
  //   );
  // }

  // // 如果需要认证但用户未登录，重定向到登录页
  // if (requireAuth && !isAuthenticated) {
  //   return <Navigate to={redirectTo} state={{ from: location }} replace />;
  // }

  // // 如果不需要认证但用户已登录，重定向到首页
  // if (!requireAuth && isAuthenticated) {
  //   const from = location.state?.from?.pathname || '/';
  //   return <Navigate to={from} replace />;
  // }

  return <>{children}</>;
};
